<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Generate JSONData</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
    label {
    	display: block;
    	position: relative;
    	margin: 3px 10px;
    	width: 140px;
    }
    input {
    	display: block;
    	position: relative;
    	width: 250px;
    }
    select{
    	display: block;
    	position: relative;
    	width: 254px;
    }
    textarea {
		margin-top: 2px;
		margin-bottom: 0;
		margin-left: 2px;
		width: 500px;
		height: 202px;
    }
	div {
	   	float: left;
	}    
	a { 
    	font: 12px Arial; 
    	color: #ac9095; 
	}
	em {
		float: right;
		color: red;
	}
	#msgerreur {
		color: red;
	}
    </style>
<script type="text/javascript">
$(document).ready(function() {
	var f = $('form'), a = $('a'),
    i = $('input[type=text]'), s = $('select'), t = $('textarea'), p = $('input[type=password]');

	$('#save').click(function() {
	    var o = {}, v = t.val();
		if(!validate()){
			return false;
		}
	    i.each(function() { 
	    o[this.name] = $(this).val(); });
	    s.each(function() { 
	        o[this.name] = $(this).val(); });
	    p.each(function() { 
		    o[this.name] = $(this).val(); });
	    if (v === '') {
	        t.val("[ \n " + JSON.stringify(o) + " \n]")         
	    }
	    else {
	        t.val(v.substr(0, v.length - 3));
	        t.val(t.val() + ", " + JSON.stringify(o) +  " \n]")  
	    }
	    generateId();
	});
});

function validate(){
	var i = $('input[type=text]');
	var s = $('select');
	var msgerror = 'Vous devez saisir tous les champs obligatoires. <br>';
	var check = true;
	
	i.each(function() { 
		if($(this).val() == ''){
			if($(this)[0] == $('input[name="officeid"]')[0] && $('select[name="site"]').val() != 'fo' && $('select[name="site"]').val() != '' || $(this)[0] == $('input[name="login"]')[0]){
				return;
			}
			msgerror += 'Vous devez remplir le champs '+ this.name + '. <br>';
			check = false;
		}
	});
	s.each(function() { 
	    	if($(this).val() == ''){
	    		if($(this)[0] == $('select[name="flux"]')[0] && $('select[name="site"]').val() != 'fo' && $('select[name="site"]').val() != ''){
					return;
				}
				msgerror += 'Vous devez remplir le champs '+ this.name + '. <br>';
				check = false;
			}
	});
	if(!check){
		$('#msgerreur').html(msgerror);
		return false;
	}
	return true;
}

function generateId(){
	var id = $('input[name=id]').val();
	id++;
	$('input[name=id]').val(id);
}

function ExportData() {
    $('a').attr('href', 'data:application/x-json;base64,' + btoa($('textarea').val())).show();
}

</script>
</head>
<body>
	<p id="msgerreur"></p>
        <div>
	        <label>Id</label> 
	        <label>Environnement <em>*</em></label>
	        <label>Plateforme <em>*</em></label>
	        <label>Réseau <em>*</em></label>
	        <label>Site <em>*</em></label> 
	        <label>Flux <em>*</em></label> 
	        <label>Agence de voyages <em>*</em></label> 
	        <label>OfficeId <em>*</em></label>
	        <label>url <em>*</em></label>
	        <label>Login </label>
	        <label>Mot de passe </label>
	    </div> 
        <div>
	        <input type="text" name="id" value="0" disabled="disabled">
	        <select name="environnement">
	            <option value="" selected="selected">Environnement</option>
	            <option value="Local">Local</option>
	            <option value="Demo">Demo</option>
	            <option value="Integration">Integration</option>
	            <option value="Pre-Production">Pré-Production</option>
	            <option value="Production">Production</option>
            </select>
            <select name="plateforme">
	            <option value="" selected="selected">Plateforme</option>
	            <option value="B2C">B2C</option>
	            <option value="B2B">B2B</option>
            </select>
            <input type="text" name="reseau">
	        <select name="site">
                <option value="" selected="selected">Site</option>
                <option value="fo">Front Office</option>
                <option value="bo">Cardibox</option>
                <option value="eretailmgr">Eretail Manager</option>
                <option value="ws">WebService</option>
            </select>
	        <select name="flux">
                <option value="" selected="selected">Flux</option>
                <option value="mixdisplay">MixDisplay</option>
                <option value="air">Air</option>
                <option value="rail">rail</option>
                <option value="hotel">Hotel</option>
                <option value="car">Véhicule</option>
                <option value="airhotel">AirHotel</option>
                <option value="railairhotel">RailAirHotel</option>
            </select>
	        <input type="text" name="agence">
	        <input type="text" name="officeid">
	        <input type="text" name="url">
	       	<input type="text" name="login"> 
			<input type="password" name="password">
	        <input type="button" id="save" value="Save"/>
        </div>
<div>
    <textarea rows="10" cols="60"></textarea><br>
    <input type="button" onclick="ExportData()" value="Export data" />
    <a href="">Download data</a>
</div>
</body>
</html>